import React, { useState, useEffect } from 'react';

const ElectronDemo: React.FC = () => {
  const [appInfo, setAppInfo] = useState<{ version: string; name: string } | null>(null);

  useEffect(() => {
    // 检查是否在 Electron 环境中运行
    if (window.electronAPI) {
      window.electronAPI.getAppInfo().then((info: { version: string; name: string }) => {
        setAppInfo(info);
      });
    }
  }, []);

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Electron 桌面应用演示</h1>
      {appInfo ? (
        <div>
          <p>应用名称: {appInfo.name}</p>
          <p>应用版本: {appInfo.version}</p>
        </div>
      ) : (
        <p>当前不在 Electron 环境中运行</p>
      )}
      
      <div className="mt-6 p-4 bg-gray-100 rounded">
        <h2 className="text-xl font-semibold mb-2">功能说明</h2>
        <ul className="list-disc pl-5">
          <li>程序已全屏置顶显示</li>
          <li>按 Esc 键可退出全屏模式</li>
          <li>按 Ctrl+Q 可退出程序</li>
          <li>系统托盘图标已创建</li>
          <li>右键托盘图标可打开菜单</li>
        </ul>
      </div>
    </div>
  );
};

export default ElectronDemo;